@import "../../Common/commonStyle.scss";

#homePage {
    p {
        margin: 0;
        padding: 0;
    }

    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: rgba(19, 20, 44, 1);

    header {
        position: relative;
        width: 100vw;
        height: 100*0.44vw;
        background:
            url('../../Assets/header/web_01@2x.png') 0 0 no-repeat,
            url('../../Assets/header/web_02@2x.png') 0 11vw no-repeat,
            url('../../Assets/header/web_03@2x.png') 0 22vw no-repeat,
            url('../../Assets/header/web_04@2x.png') 0 33vw no-repeat,
            url('../../Assets/header/web_05@2x.png') 0 44vw no-repeat;
        background-size: 100%;
        box-sizing: content-box;

        hgroup {
            position: absolute;
            width: 100%;
            top: 100*0.34vw;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
            text-align: center;
            z-index: 3;

            .banner-p1 {
                margin-bottom: 0;
                font-family: $PingFang-SC-Heavy-fontFamily;
                font-weight: 800;
                color: rgba(255, 255, 255, 1);
                animation: bannerP1 5s;
            }

            .banner-p2 {
                margin-bottom: 0;
                color: $fontColor;
                animation: bannerP1 5s;
            }
        }
    }

    // 头部与内容间线条样式
    .banner-line {
        position: absolute;
        width: 100%;
        height: 100*0.31vw;
        top: 32.5vw;
        background-image: url('../../Assets/header/line@2x.png');
        background-repeat: no-repeat;
        background-size: cover;
        animation: bannerLine 5s linear infinite;
        z-index: 1;
    }

    // 主体样式
    main {
        background-color: rgba(19, 20, 44, 1);

        // 解释文字
        .explanation-box {
            ul {
                position: relative;
                z-index: 1;
                display: flex;
                flex-direction: row;
                justify-content: space-around;

                li {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background-image: url(../../Assets/home/explanation-border@2x.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                    .explanation-logo {
                        position: relative;

                        .explanation-logo-img {
                            position: absolute;
                            width: 60%;
                            height: 60%;
                            margin-left: 20%;
                            margin-top: 20%;
                        }

                        .menu {
                            background-image: url(../../Assets/home/menu@2x.png);
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }

                        .aims {
                            background-image: url(../../Assets/home/aims@2x.png);
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }

                        .wallet {
                            background-image: url(../../Assets/home/wallet@2x.png);
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }
                    }

                    .line {
                        img {
                            width: 100%;
                        }
                    }

                    p {
                        display: inline-block;
                        font-family: $PingFangSC-Light-fontFamily;
                        color: rgba(255, 255, 255, 1);
                    }
                }

                li:hover,
                li:active,
                li:focus {
                    position: relative;
                    background-image: url(../../Assets/home/explanation-bg-hover@2x.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                    .menu {
                        background-image: url(../../Assets/home/menu-hover@2x.png);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .aims {
                        background-image: url(../../Assets/home/aims-hover@2x.png);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .wallet {
                        background-image: url(../../Assets/home/wallet-hover@2x.png);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }
            }
        }

        // 特点
        .feature-box {
            &>section {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;

                .feature-icon-box {
                    position: relative;
                    width: 42.7vw;

                    .feature-line {
                        position: absolute;
                    }

                    .feature-icon-lamp {
                        position: absolute;

                        img {
                            position: absolute;
                        }
                    }

                    .feature-base {
                        z-index: 1;
                    }
                }

                .feature-detail {
                    width: 40vw;

                    .feature-detail-title {
                        position: relative;
                        display: inline-block;
                        text-align: center;

                        img {
                            position: absolute;
                            left: 0;
                            right: 0;
                            margin: 0 auto;
                        }

                        span {
                            display: inline-block;
                            font-family: $PingFang-SC-Heavy-fontFamily;
                            font-weight: 800;
                            letter-spacing: 3px;
                            color: rgba(100, 223, 222, 1);
                        }
                    }

                    .feature-detail-txt {
                        display: block;

                        font-family: $PingFangSC-Light-fontFamily;
                        font-weight: 300;
                        color: rgba(255, 255, 255, 1);

                    }

                }
            }

            .feature-interesting {
                .feature-detail {
                    margin-left: 17.3vw;
                }
            }

            &>section:hover {
                .feature-detail-title {
                    span {
                        color: rgba(255, 255, 255, 1);
                        text-shadow: 0px 2px 14px rgba(100, 223, 222, 0.6);

                    }
                }

                .lightning {
                    animation: lightningLift 2s ease infinite alternate;
                }

                .smiley {
                    animation: smileyLift 2s ease infinite alternate;
                }

                .people {
                    animation: peopleLift 2s ease infinite alternate;
                }
            }
        }

        // 联系我们
        .contact-us-box {
            position: relative;

            .contact-us-bg {
                position: relative;
                height: 44vw;

                img {
                    position: absolute;
                }

                img:nth-child(1) {
                    width: 22.2vw;
                    top: 66%;
                }

                img:nth-child(2) {
                    width: 79vw;
                    left: 18.3vw;
                }

                img:nth-child(3) {
                    width: 7vw;
                    right: 27%;
                    animation: contactLogo 4s linear infinite alternate;

                }

                img:nth-child(4) {
                    right: 0;
                    top: 10%;
                    width: 15vw;
                }

                img:nth-child(5) {
                    right: 0;
                    top: 33%;
                    width: 6vw;
                }

                img:nth-child(6) {
                    width: 10vw;
                    right: 25.5%;
                    top: 2%;
                    animation: contactAdorn 5s linear infinite;

                }

                img:nth-child(7) {
                    width: 10vw;
                    left: 22.5%;
                    top: 35%;
                    opacity: .6;
                    animation: contactAdorn2 5s linear infinite;
                }

                img:nth-child(8) {
                    width: 10vw;
                    left: 22.5%;
                    top: 14%;
                    opacity: .6;
                    animation: contactAdorn3 5s linear infinite;

                }
            }

            .contact-us-txt {
                position: absolute;

                p {
                    font-family: $PingFangSC-Regular-fontFamily;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }

                .uploadBtn {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    background: none;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    padding: 0;
                    border-radius: 40px;

                    box-shadow: 0px 2px 10px 0px rgba(100, 223, 222, 0.1);

                    .btn-bg {
                        width: 100%;
                    }

                    span {
                        font-family: $PingFangSC-Regular-fontFamily;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }

                    .btn-icon {
                        position: absolute;
                        width: 4.5vw;
                    }

                    .upload-txt {
                        position: absolute;
                        left: 32%;

                    }

                    .googlePlay {
                        margin-right: 7px;
                    }
                }


            }
        }
    }
}

.homePage-pc {
    .record {
        padding-bottom: 10px;
    }

}




@media screen and(min-width: 1025px) and(max-width: 1440px) {
    .homePage-pc {

        // 头部样式
        header {
            padding-bottom: 100px;

            hgroup {
                .banner-p1 {
                    font-weight: 800;
                    font-size: 86px;
                    line-height: 120px;
                    letter-spacing: 2px;
                    text-shadow: 0px 2px 6px rgba(100, 223, 222, 0.6);
                }

                .banner-p2 {
                    font-size: 45px;
                    font-family: $PingFang-SC-Bold-fontFamily;
                    font-weight: bold;
                    line-height: 63px;
                    letter-spacing: 1px;
                    text-shadow: 0px 2px 14px rgba(100, 223, 222, 0.3);
                }
            }
        }

        main {
            padding-top: 50px;

            // 解释文字
            .explanation-box {
                ul {
                    li {
                        width: 350px;
                        padding: 60px 55px;

                        .explanation-logo {
                            width: 8.6vw;
                            height: 8.6vw;
                            margin-bottom: 20px;
                            background-image: url(../../Assets/home/explanation-icon-border@2x.png);
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }

                        .line {
                            margin-bottom: 35px;
                        }

                        p {
                            width: 252px;
                            font-size: 18px;
                            font-weight: 300;
                            line-height: 40px;
                            text-shadow: 0px 2px 6px rgba(68, 183, 182, 0.39);
                        }
                    }
                }
            }

            // 特点
            .feature-box {
                margin-top: 150px;

                &>section {
                    height: 370px;

                    .feature-icon-box {

                        .feature-line {
                            width: 50%;
                            top: 24%;
                        }

                        .feature-icon-lamp {
                            width: 280px;
                            height: 350px;
                            left: 36%;
                            top: -8%;

                            .feature-base {
                                width: 100%;
                            }

                            .feature-adorn {
                                width: 140px;
                                right: 24%;
                                top: -6%;
                                animation: adornLift 2s ease infinite alternate;
                            }

                            .lightning {
                                z-index: 3;
                                width: 80px;
                                right: 33%;
                                top: -10%;
                            }

                            .people {
                                width: 32%;
                                right: 33%;
                                top: -12%;
                            }

                        }

                        .smiley-line {
                            width: 48%;
                            right: 0;
                            top: 60%;
                            transform: rotateZ(180deg);
                            z-index: 2;

                        }

                        .feature-icon-smiley {
                            left: 17%;

                            .smiley {
                                width: 34%;
                                left: 33%;
                                top: -9%;
                            }
                        }



                    }

                    .feature-detail {

                        .feature-detail-title {
                            margin-bottom: 4%;

                            img {
                                width: 136px;
                                top: 12%;
                            }

                            span {
                                margin: 0 30px 20px 30px;
                                font-size: 36px;
                                line-height: 50px;
                                letter-spacing: 3px;
                                top: -10%;
                            }
                        }

                        .feature-detail-txt {
                            width: 580px;
                            font-size: 18px;
                            line-height: 25px;
                        }
                    }

                }
            }

            // 联系我们
            .contact-us-box {
                .contact-us-txt {

                    left: 16.5%;
                    top: 0;

                    p {
                        font-size: 36px;
                        line-height: 50px;
                        text-shadow: 0px 2px 14px rgba(0, 214, 255, 0.5);
                        margin-left: 20px !important;
                        margin-bottom: 45px !important;

                    }

                    .uploadBtn {
                        width: 23.6vw;
                        margin-bottom: 30px;

                        .btn-icon {
                            margin-left: 42px;
                        }

                        span {
                            margin-left: 18px;
                            font-size: 36px;
                            line-height: 50px;
                            text-shadow: 0px 2px 14px rgba(0, 214, 255, 0.5);
                        }

                        .googleplayTxt {
                            margin-left: 0px;
                        }
                    }
                }
            }






        }
    }

    .enTxtStyle {
        header {
            padding-bottom: 70px;

            hgroup {
                .banner-p1 {
                    font-size: 68px;
                    line-height: 95px;
                    letter-spacing: 2px;
                    text-shadow: 0px 2px 6px rgba(100, 223, 222, 0.6);
                }

                .banner-p2 {

                    font-size: 45px;
                    font-family: $PingFang-SC-Bold-fontFamily;
                    font-weight: bold;
                    color: rgba(100, 223, 222, 1);
                    line-height: 63px;
                    letter-spacing: 1px;
                    text-shadow: 0px 2px 14px rgba(100, 223, 222, 0.3);
                    font-size: 45px;
                    font-weight: bold;
                    line-height: 63px;
                    letter-spacing: 1px;
                    text-shadow: 0px 2px 14px rgba(100, 223, 222, 0.3);
                }
            }
        }

        // 头部与内容间线条样式
        .banner-line {
            position: absolute;
            width: 100%;
            height: 100*0.31vw;
            top: 32.5vw;
            background-image: url('../../Assets/header/line@2x.png');
            background-repeat: no-repeat;
            background-size: cover;
            animation: bannerLine 5s linear infinite;
            z-index: 1;
        }

        // 主体样式
        main {

            // 解释文字
            .explanation-box {
                ul {
                    li {
                        p {
                            width: 260px;
                            font-size: 16px;
                            font-family: $PingFang-SC-Medium-fontFamily;
                            font-weight: 500;
                            color: rgba(255, 255, 255, 1);
                            line-height: 28px;
                            text-shadow: 0px 2px 6px rgba(68, 183, 182, 0.39);
                        }
                    }
                }

            }

            // 特点
            .feature-box {
                &>section {
                    .feature-detail {
                        .feature-detail-title {

                            img {
                                top: 0;
                            }

                            span {

                                margin: 0 0 18px 0;
                                font-size: 30px;
                                font-family: $PingFang-SC-Heavy-fontFamily;
                                font-weight: 800;
                                color: rgba(100, 223, 222, 1);
                                line-height: 42px;
                                letter-spacing: 2px;
                                top: 0%;

                            }
                        }

                        .feature-detail-txt {
                            width: 555px;
                            font-size: 18px;
                            line-height: 30px;
                            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
                        }
                    }
                }
            }

            // 联系我们
            .contact-us-box {
                .contact-us-txt {

                    left: 16.5%;
                    top: 2%;

                    p {

                        font-size: 34px;
                        font-family: $PingFangSC-Regular-fontFamily;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                        line-height: 48px;
                        text-shadow: 0px 2px 14px rgba(0, 214, 255, 0.5);
                        margin-bottom: 30px !important;
                        margin-left: 20px !important;
                    }

                    .uploadBtn {
                        width: 23.6vw;
                        height: 7.05vw;
                        margin-bottom: 15px;

                        .btn-icon {
                            margin-left: 42px;
                        }

                        span {
                            margin-left: 18px;
                            font-size: 36px;
                            line-height: 50px;
                            text-shadow: 0px 2px 14px rgba(0, 214, 255, 0.5);
                        }

                        .googleplayTxt {
                            margin-left: 0px;
                        }
                    }
                }
            }
        }

    }
}

@media screen and(min-width: 1441px) {
    .homePage-pc {

        // 头部样式
        header {
            padding-bottom: 100px;

            hgroup {
                .banner-p1 {
                    font-size: 115px;
                    line-height: 160px;
                    letter-spacing: 3px;
                    text-shadow: 0px 3px 8px rgba(100, 223, 222, 0.6);
                }

                .banner-p2 {
                    font-family: $PingFangSC-Regular-fontFamily;
                    font-size: 47px;
                    font-weight: 400;
                    line-height: 65px;
                    letter-spacing: 1px;
                    text-shadow: 0px 3px 19px rgba(100, 223, 222, 0.3);
                }
            }
        }

        main {
            padding-top: 50px;

            // 解释文字
            .explanation-box {
                ul {
                    li {
                        width: 470px;
                        padding: 60px 55px;

                        .explanation-logo {
                            width: 8.6vw;
                            height: 8.6vw;
                            margin-bottom: 20px;
                            background-image: url(../../Assets/home/explanation-icon-border@2x.png);
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }

                        .line {
                            margin-bottom: 35px;
                        }

                        p {
                            width: 342px;
                            font-size: 24px;
                            font-family: $PingFangSC-Light-fontFamily;
                            font-weight: 300;
                            color: rgba(255, 255, 255, 1);
                            line-height: 53px;
                            text-shadow: 0px 3px 8px rgba(68, 183, 182, 0.39);
                        }
                    }
                }
            }

            // 特点
            .feature-box {
                margin-top: 150px;

                &>section {
                    height: 500px;

                    .feature-icon-box {
                        .feature-line {
                            width: 63.5%;
                        }

                        .feature-icon-lamp {
                            width: 280px;
                            height: 404px;
                            left: 56%;

                            .feature-base {
                                width: 100%;
                                top: 2%;
                            }

                            .feature-adorn {
                                width: 140px;
                                right: 24%;
                                top: -6%;
                                animation: adornLift 2s ease infinite alternate;
                            }

                            .lightning {
                                z-index: 3;
                                width: 80px;
                                right: 33%;
                                top: -10%;
                            }

                            .people {
                                width: 35%;
                                right: 32%;
                                top: -12%;
                            }
                        }

                        .feature-icon-smiley {
                            left: 10%;

                            .smiley {
                                width: 37%;
                                left: 31%;
                                top: -9%;
                                z-index: 3;
                            }
                        }

                        .smiley-line {
                            right: 0;
                            top: 52%;
                            transform: rotateZ(180deg)
                        }





                    }

                    .feature-detail {

                        .feature-detail-title {
                            margin-bottom: 4%;

                            img {
                                width: 150px;
                                top: 20%;
                            }

                            span {
                                margin: 0 50px 20px 50px;
                                font-size: 48px;
                                line-height: 67px;
                                letter-spacing: 4px;
                                text-shadow: 0px 3px 19px rgba(100, 223, 222, 0.6);
                            }
                        }

                        .feature-detail-txt {
                            width: 773px;
                            font-size: 24px;
                            color: rgba(255, 255, 255, 1);
                            line-height: 33px;
                        }
                    }

                }
            }


            // 联系我们
            .contact-us-box {

                .contact-us-txt {
                    left: 16.5%;
                    top: 0;

                    p {
                        font-size: 48px;
                        line-height: 67px;
                        text-shadow: 0px 3px 19px rgba(0, 214, 255, 0.5);
                        margin-bottom: 45px !important;
                        margin-left: 10px !important;
                    }

                    .uploadBtn {
                        width: 23.6vw;
                        height: 6.5vw;
                        margin-bottom: 35px;

                        .btn-icon {
                            margin-left: 52px;
                        }

                        span {
                            font-size: 48px;
                            line-height: 67px;
                            margin-left: 36px;
                            text-shadow: 0px 3px 19px rgba(0, 214, 255, 0.5);
                        }

                        .googleplayTxt {
                            margin-left: 16px;
                        }
                    }
                }
            }





        }
    }

    .enTxtStyle {
        header {
            hgroup {
                .banner-p1 {
                    font-size: 91px;
                    line-height: 127px;
                    letter-spacing: 3px;
                    text-shadow: 0px 3px 8px rgba(100, 223, 222, 0.6);
                }

                .banner-p2 {
                    font-size: 60px;
                    font-weight: bold;
                    color: rgba(100, 223, 222, 1);
                    line-height: 84px;
                    letter-spacing: 1px;
                    text-shadow: 0px 3px 19px rgba(100, 223, 222, 0.3);
                }
            }
        }

        // 主体样式
        main {

            // 解释文字
            .explanation-box {
                ul {
                    li {

                        width: 480px;
                        padding: 60px 64px;

                        p {
                            width: 347px;
                            font-size: 24px;
                            line-height: 40px;
                            text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
                        }
                    }
                }

            }

            // 特点
            .feature-box {
                &>section {
                    .feature-detail {
                        .feature-detail-title {

                            img {
                                top: 10%;
                            }

                            span {

                                margin: 0 20px 20px 20px;
                                font-size: 40px;
                                line-height: 56px;
                                text-shadow: 0px 3px 19px rgba(100, 223, 222, 0.6);

                            }
                        }
                    }
                }
            }
        }
    }

}


@keyframes bannerP1 {
    0% {
        transform: scale(2);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bannerLine {
    0% {
        top: 40.5vw;
        opacity: 0;
    }

    50% {
        top: 35.5vw;
        opacity: 1;
    }

    100% {
        top: 30.5vw;
        opacity: 0;
    }
}

@keyframes adornLift {
    0% {
        top: -6%;
        opacity: 0;
    }

    100% {
        top: -18%;
        opacity: 1;
    }
}

@keyframes lightningLift {
    0% {
        top: -5%;
        opacity: 0;
    }

    100% {
        top: -13%;
        opacity: 1;
    }
}

@keyframes smileyLift {
    0% {
        top: -14%;
        opacity: 0;
    }

    100% {
        top: -20%;
        opacity: 1;
    }
}

@keyframes peopleLift {
    0% {
        top: -12%;
        opacity: 0;
    }

    100% {
        top: -20%;
        opacity: 1;
    }
}

@keyframes contactLogo {
    0% {
        top: 0%;
        opacity: 0;
    }

    50% {
        top: -3%;
        opacity: 1;
    }

    100% {
        top: -6%;
        opacity: 0;
    }
}

@keyframes contactAdorn {
    0% {
        top: 2%;
        opacity: 0;
    }

    50% {
        top: -2%;
        opacity: 1;
    }

    100% {
        top: -6%;
        opacity: 0;
    }
}

@keyframes contactAdorn2 {
    0% {
        top: 35%;
        opacity: 0;
    }

    50% {
        top: 31%;
        opacity: .6;
    }

    100% {
        top: 27%;
        opacity: 0;
    }
}

@keyframes contactAdorn3 {
    0% {
        top: 14%;
        opacity: 0;
    }

    50% {
        top: 10%;
        opacity: .6;
    }

    100% {
        top: 6%;
        opacity: 0;
    }
}